<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="mine">
				实名认证
			</view>
			<view class="form_item">
				<view class="crypto">真实姓名</view>
				<view class="item_box input_box flex">
					<input type="text" maxlength="30" v-model="form.name" />
				</view>
			</view>
			<view class="form_item">
				<view class="crypto">
					证件号码
				</view>
				<view class="item_box input_box flex">
					<input type="number" maxlength="30" v-model="form.cardno" />
				</view>
			</view>
			<view class="flex_between" style="column-gap: 40rpx;">
				<view class="form_item item">
					<view class="crypto">
						身份证正面
					</view>
					<view class="item_box flex_center img_box">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" width="100" height="80" uploadIcon="photo">
						</u-upload>
					</view>
				</view>
				<view class="form_item item">
					<view class="crypto">
						身份证背面
					</view>
					<view class="item_box flex_center img_box">
						<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
							:maxCount="1" width="100" height="80" uploadIcon="photo">
						</u-upload>
					</view>
				</view>
			</view>
			<view class="status" v-if="status === 2"
				style="color: red;font-weight: bold; font-size: 20px; margin-top: 10px;">
				<text style="color: red;">审核失败：{{ failReason }}</text>
			</view>
			<view class="status" v-if="status === 0 && form.cardno != ''"
				style="color: orange;font-weight: bold; font-size: 20px; margin-top: 10px;">
				<text>待审核</text>
			</view>
			<view class="fixed">
				<view class="done btn flex_between" v-if="status === 1">
					<text>已认证</text>
					<uni-icons custom-prefix="iconfont" type="icon-duigou" color="#fff" size="24"></uni-icons>
				</view>
				<view class="done btn flex_between" @tap="confirmBtn" v-if=" status !== 1">
					<text>提交</text>
					<uni-icons custom-prefix="iconfont" type="icon-duigou" color="#fff" size="24"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import {
		authaddApi,
		authinfoApi
	} from '@/api/api.js'
	export default {
		components: {
			headerView
		},
		data() {
			return {
				form: {
					name: '',
					cardno: '',
					zimage: '',
					fimage: ''
				},
				isAuthenticated: false,
				fileList1: [],
				fileList2: [],
				name: "",
				card: "",
				status: 0, // 默认为待审核
				failReason: "" // 失败原因
			}
		},
		onLoad() {
			this.getAuthInfo()
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fullurl,
						upload: result.url
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://43.139.121.71:1010/api/common/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						}
					});
				})
			},
			// 获取认证信息
			getAuthInfo() {
				// 调用 authinfoApi 获取认证信息
				authinfoApi().then(res => {
					// 如果已认证， 则更新状态
					if (res.data.data.status !== undefined) {
						this.status = res.data.data.status;
						this.form.name = res.data.data.name
						this.form.cardno = res.data.data.cardno
						this.fileList1 = [{
							url: res.data.data.zimage_url,
							upload: res.data.data.zimage,
							status: 'success',
							message: ''
						}];
						this.fileList2 = [{
							url: res.data.data.fimage_url,
							upload: res.data.data.fimage,
							status: 'success',
							message: ''
						}];
						this.isAuthenticated = true;
						if (this.status === 2) {
							this.failReason = res.data.data.remark;
						}
					}
				})
			},
			// 提交认证信息
			confirmBtn() {
				// 根据实际情况获取 name、card、fileList1、fileList2 的值
				this.form.zimage = this.fileList1[0].upload;
				this.form.fimage = this.fileList2[0].upload;
				// 调用 authaddApi 提交认证信息
				authaddApi(this.form).then(res => {
					this.isAuthenticated = true;
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;

		.mine {
			padding-top: 60rpx;
			font-size: 30px;
			font-weight: 500;
			font-family: PM;
			line-height: 92rpx;
		}

		.crypto {
			font-family: PM;
			margin-top: 40rpx;
			opacity: .8;
		}

		.fixed {
			.btn {
				height: 100rpx;
				line-height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				padding: 0 40rpx;
				border-radius: 20rpx;
				background-image: url("../../../static/img/btn_bg.png");
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
				margin-left: 80rpx;
				border-radius: 20rpx 0px 0px 20rpx;
				position: absolute;
				left: 0px;
				right: 0px;
				bottom: 200rpx;
			}

			.done {
				background-color: #0065ff;
			}

			.success {
				background-color: #00b578;
			}
		}

		.form_item {
			.item_box {
				margin-top: 20rpx;
				background-color: hsla(0, 0%, 92.9%, .46);
				border-radius: 20rpx;
				font-size: 30rpx;
				border: 4rpx solid #3d3d3d;
				width: 100%;
				font-size: 30rpx;
				padding: 0 40rpx;
				font-weight: 600;
				font-family: PM;
			}

			.input_box {
				height: 90rpx;
				line-height: 90rpx;
			}

			.img_box {
				padding: 0 40rpx;
				height: 230rpx;
			}
		}

		.item {
			flex: 1;
		}

		/deep/.u-upload__button {
			margin: 0;
			background: transparent;
		}
	}
</style>